<div id="draggable-datatable-1" class="col-12 col-sm-12 col-xl-12 mb-4 draggable" draggable="true" style="display: none;">
    <div class="card card-body border-0 shadow table-wrapper table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="border-gray-200">#</th>
                    <th class="border-gray-200">Bill For</th>
                    <th class="border-gray-200">Issue Date</th>
                    <th class="border-gray-200">Due Date</th>
                    <th class="border-gray-200">Total</th>
                    <th class="border-gray-200">Status</th>
                    <th class="border-gray-200">Action</th>
                </tr>
            </thead>
            <tbody>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456478
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 May 2020</span></td>
                    <td><span class="fw-normal">1 Jun 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-warning">Due</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456423
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Apr 2020</span></td>
                    <td><span class="fw-normal">1 May 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456420
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Mar 2020</span></td>
                    <td><span class="fw-normal">1 Apr 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456421
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Feb 2020</span></td>
                    <td><span class="fw-normal">1 Mar 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456420
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Jan 2020</span></td>
                    <td><span class="fw-normal">1 Feb 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456479
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Dec 2019</span></td>
                    <td><span class="fw-normal">1 Jan 2020</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456478
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Platinum Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Nov 2019</span></td>
                    <td><span class="fw-normal">1 Dec 2019</span></td>
                    <td><span class="fw-bold">$799,00</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            453673
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Gold Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Oct 2019</span></td>
                    <td><span class="fw-normal">1 Nov 2019</span></td>
                    <td><span class="fw-bold">$533,42</span></td>
                    <td><span class="fw-bold text-danger">Cancelled</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456468
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Gold Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Sep 2019</span></td>
                    <td><span class="fw-normal">1 Oct 2019</span></td>
                    <td><span class="fw-bold">$533,42</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- Item -->
                <tr>
                    <td>
                        <a href="#" class="fw-bold">
                            456478
                        </a>
                    </td>
                    <td>
                        <span class="fw-normal">Flexible Subscription Plan</span>
                    </td>
                    <td><span class="fw-normal">1 Aug 2019</span></td>
                    <td><span class="fw-normal">1 Sep 2019</span></td>
                    <td><span class="fw-bold">$233,42</span></td>
                    <td><span class="fw-bold text-success">Paid</span></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="icon icon-sm">
                                    <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="#"><span class="fas fa-eye me-2"></span>View
                                    Details</a>
                                <a class="dropdown-item" href="#"><span class="fas fa-edit me-2"></span>Edit</a>
                                <a class="dropdown-item text-danger rounded-bottom" href="#"><span
                                        class="fas fa-trash-alt me-2"></span>Remove</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div
            class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                    <li class="page-item">
                        <a class="page-link" href="#">Previous</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">5</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                </ul>
            </nav>
            <div class="fw-normal small mt-4 mt-lg-0">Showing <b>5</b> out of <b>25</b> entries</div>
        </div>
    </div>
</div>